// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted(el, binding) {
        //el： 指令所绑定的元素，img
        //binding： 对象里包含指令所绑定的元素，图片url
        //console.log(el, binding.value)
        const {stop} = useIntersectionObserver(
              el,
              ([{ isIntersecting }]) => {
                console.log(isIntersecting) // true 进入
                if (isIntersecting) {
                  // 进入视口区域
                  el.src = binding.value
                  stop()  // 第一次加载后，停止监听
                }
              },
            )
      }
    })
  }
}
